<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>

<!-- <div class="layui-row " style="padding-left: 18px; padding-top: 10px;"> -->

<div class="layui-form layui-form-pane" lay-filter="testForm">
    <div class=" layui-form-item layui-inline" style="margin-bottom: 0px;">
        <label class="layui-form-label">司机身份证号</label>
        <div class="layui-inline">
            <input id="idcard" class="layui-input" type="text" placeholder="司机身份证号"/>
        </div>
    </div>
    <div class=" layui-form-item layui-inline" style="margin-bottom: 0px;">
        <label class="layui-form-label">客户手机号</label>
        <div class="layui-inline">
            <input id="linkmanPhone" class="layui-input" type="text" placeholder="客户手机号"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline" style="margin-bottom: 0px;">
        <label class="layui-form-label">货运单编号</label>
        <div class="layui-inline">
            <input id="goodsRevertBillCode" class="layui-input" type="text" placeholder="货运单编号"/>
        </div>
    </div>
    <div class="layui-form-item layui-inline" style="margin-bottom: 0px;">
        <label class="layui-form-label" style="margin-top: 19px">交货日期</label>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="arriveBegin" placeholder="交货起时间">
            <input type="text" class="layui-input" id="arriveEnd" placeholder="交货止时间">
        </div>
    </div>
    <div class="layui-form-item layui-inline">
        <div class="layui-inline">

        </div>
    </div>

    <!--    <div class="layui-inline">
            <div class="layui-input-inline">

            </div>
        </div>-->

    <!--    <div class="layui-inline">
            <input id="balanceDate" class="layui-input" type="text" placeholder="结算日期"/>
        </div>-->
    <div class="layui-inline">
        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i></button>
        <button id="btnReset" class="layui-btn layui-btn-normal" title="点击重置查询条件"><i
                class="layui-icon">&#xe639;</i></button>
    </div>


    <div class="layui-inline">
        <button id="addReceipt" class="layui-btn icon-btn" ><i class="layui-icon" >添加</i></button>
        <button id="acceptCheck" class="layui-btn layui-btn-normal" title="接货员验收"><i
                class="layui-icon">接货员验收</i></button>
        <button id="notifyCustomer" class="layui-btn layui-btn-normal" title="接货员验收"><i
                class="layui-icon">短信通知客戶提货</i></button>
        <button id="customerCheck" class="layui-btn layui-btn-normal" title="收货客户验收"><i
                class="layui-icon">收货客户验收</i></button>
        <button id="arriveNotify" class="layui-btn layui-btn-normal" title="短信通知客户到货"><i
                class="layui-icon">短信通知客户到货</i></button>
        <button id="errorArrive" class="layui-btn layui-btn-normal layui-bg-cyan" title="差错信息填写"><i
                class="layui-icon">差错信息填写</i></button>
        <button id="getMoney" class="layui-btn layui-btn-normal layui-bg-red" title="收款"><i
                class="layui-icon ">收款</i></button>
    </div>
</div>
</div>
<table class="layui-hide" id="testTable" lay-filter="testTable"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button id="btnBatchDelete" class="layui-btn layui-btn-sm layui-btn-danger">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../layui/layui.js" charset="utf-8"></script>

<script>

    // 要使用的layui模块
    layui.use(['layer', 'form', 'table', 'laydate', 'element'], function () {
        var layer = layui.layer; // 获得layer模块
        var form = layui.form; // 获得form模块
        var table = layui.table; // 获得table模块
        var laydate = layui.laydate; // 获得laydate模块
        var element = layui.element; // 获得element模块（和导航、tab等有关）
        var $ = layui.$; // 调用JQuery方法时
        var laytpl = layui.laytpl;

        //更新 lay-filter="test2" 所在容器内的全部 select 状态
        // form.render('select', 'test2');


        //第一个实例
        var tableIns = table.render({
            elem: '#testTable' // 给table设置id或class，方便layui调用该元素
            , height: 'full-200' // 窗口高度-100
            , url: 'http://localhost:9000/arrival/seek' // 数据接口
            // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
            , page: true // 开启分页
            , limit: 5 // 默认页大小
            , limits: [5, 10, 15, 50, 100] //自定义可选分页大小
            , cellMinWidth: 80 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'line' // 行边框风格
            // ,even: true // 开启隔行背景
            // ,size: 'sm' // 小尺寸的表格
            //, totalRow: true // 开启合计功能
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            , defaultToolbar: ['filter', 'exports', 'print', { // 列过滤、导出按钮、打印按钮
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '货运回执表'// 表名
            // 列信息
            , cols: [[ //表头
                // {type:'radio', fixed: 'left'} // 开启单选框
                {type: 'checkbox', fixed: 'left'} // 开启复选框
                //, {field: 'cmsid', title: 'ID', fixed: 'left', sort: true, totalRowText: '合计'}
                , {field: 'goodsRevertBillCode', title: '货运回执单编号'}
                , {field: 'startCarryTime', title: '起运时间'}
                , {field: 'arriveTime', title: '到货时间', totalRow: true}
                , {field: 'allCarriage', title: '总运费', totalRow: true}
                , {field: 'insurance', title: '保险费', totalRow: true}
                , {field: 'receiveGoodsLinkman', title: '收货联系人'}
                , {field: 'linkmanPhone', title: '联系人手机', totalRow: true}
                , {field: 'driverInformation', title: '司机姓名', totalRow: true ,templet: '<div>{{d.driverInformation.driverName}}</div>'}
                , {field: 'ifBalance', title: '是否结算', totalRow: true}
                , {field: 'checkGoodsReceive', title: '收货验收', totalRow: true, templet: '<div>{{d.checkGoodsReceive.status}}</div>'}
                , {field: 'checkGoodsCustomer', title: '客户验收', minWidth: 200, align: 'center', templet: '<div>{{d.checkGoodsCustomer.status}}</div>'}
                // 域属性写法： tryTry为域属性在对象中的名称，{{d.tryTry.tid}}中d为固定内容，tid是域属性中的属性
                // ,{field: 'tryTry', title: '域属性id', minWidth: 150, align: 'center', templet: '<div>{{d.tryTry.tid}}</div>'}
                // ,{field: 'tryTry', title: '域属性name', minWidth: 150, align: 'center', templet: '<div>{{d.tryTry.tname}}</div>'}

                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
        });
        // layer.msg('hello');


        // laydate时间模块，指定html的元素
        // 弃用
        /*laydate.render({
            elem: '#balanceDate' // 指定元素
            ,range: true // 启用范围，或 range: '~' 来自定义分割字符，默认'-'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,btns: ['clear', 'now', 'confirm']
            // ,theme: '#393D49'
            ,theme: 'grid'
        });*/
        // 开始日期
        var insStart = laydate.render({
            elem: '#arriveBegin'
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            // , min: 0
            , done: function (value, date) {
                //更新结束日期的最小日期
                /*insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });*/
                endMax = insEnd.config.max;
                insEnd.config.min = date; //最大时间为结束时间的开始值
                insEnd.config.min.month = date.month -1;

                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });
        //结束日期
        var insEnd = laydate.render({
            elem: '#arriveEnd'
            // , min: 0
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            , done: function (value, date) {
                //更新开始日期的最大日期
                /*insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });*/
                if($.trim(value) == ''){
                    var curDate = new Date();
                    date = {'date': curDate.getDate(), 'month': curDate.getMonth()+1, 'year': curDate.getFullYear()};
                }
                insStart.config.max = date;//最小时间为开始时间的最大值
                insStart.config.max.month = date.month -1;
            }
        });


        /*        // 查询用对象
                var MgrSettle = {
                    tableId: "testTable",    //表格id
                    condition: {
                        customer: "",
                        balanceDate: ""
                    }
                };*/

        // 查询请求内容
        /* MgrSettle.search = function () {
             var queryData = {};
             queryData['customer'] = $("#customer").val();
             queryData['goodsBillCode'] = $("#goodsBillCode").val();
             var balanceDate = $("#balanceDate-start").val()+' - '+$("#balanceDate-end").val();
             queryData['balanceDate'] = balanceDate;
             table.reload(MgrSettle.tableId, {where: queryData});
         };*/
        $("#btnSearch").on('click', function(){
            //alert("dddd");
            tableIns.reload({
                where:{
                    idcard:$("#idcard").val(),
                    linkmanPhone:$("#linkmanPhone").val(),
                    goodsRevertBillCode:$("#goodsRevertBillCode").val().trim(),
                    arriveBegin:$("#arriveBegin").val(),
                    arriveEnd:$("#arriveEnd").val()
                }

            })
        })

//点击添加按钮
        $("#addReceipt").on('click', function(){
            layer.open({
                type: 2,//弹出框类型
                title: '添加货运回执单',
                shadeClose: false, //点击遮罩关闭层
                area : ['60%' , '30%'],//弹出框大小
                shift:1,//弹出框动画效果
                content: 'addReceipt.html',
                success: function(layero, index){
                }
            });
        })

        //点击差错填写按钮
        $("#errorArrive").on('click', function(){

            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            layer.open({
                type: 2,//弹出框类型
                title: '货运差错信息填写',
                shadeClose: false, //点击遮罩关闭层
                area : ['60%' , '90%'],//弹出框大小
                shift:1,//弹出框动画效果
                content: 'arriveError.html',
                success: function(layero, index){
					 var body = layer.getChildFrame('body', index); //得到产品的BODY
                        body.find('#hidValue').val(num); //将本层的窗口索引传给的hidValue中
                }
            });
        })
        //点击接货员验收
        $("#acceptCheck").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data,
                keys ="";
            if(data.length > 0) {
                for (var i in data) {
                    keys+=data[i].grmid+",";
                }
                keys = keys.substring(0,keys.length-1);
            }
            $.post(
                "http://localhost:9000/arrival/checkReceive",
                "keys="+keys,function(data){
                    if(data.code=="0"){
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 2000
                        })
                        window.parent.location.reload();
                        location.reload();
                    }else{
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 2000
                        })
                    }
                }
            )
        })


        //点击客户验收
        $("#customerCheck").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            $.post(
                "http://localhost:9000/arrival/checkCustomer",
                "num="+num,function(data){
                    if(data.code=="0"){
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                        setTimeout(function() {
                            location.reload();
                            // parent.location.reload();
                        }, 2000);
                        //location.reload();
                    }else{
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                    }
                }

            )
        })
        //点击收款
        $("#getMoney").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            location.href= "http://localhost:9000/arrival/settle?num="+num;
        })
        //点击短信通知客戶收货
        $("#notifyCustomer").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            $.get(
                "http://localhost:9000/arrival/notifyCustomer/"+num,
                function(data){
                    alert(data.msg);
                    if(data.code=="0"){
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                        setTimeout(function() {
                            location.reload();
                            // parent.location.reload();
                        }, 2000);
                        //location.reload();
                    }else{
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                    }
                }

            )
        })
        //点击收款
        $("#getMoney").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            location.href= "http://localhost:9000/arrival/settle?num="+num;
        })
        //arriveNotify点击短信通知发货客戶到货
        $("#arriveNotify").on('click', function(){
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data;
            if(data.length !=1) {
                layer.msg("请选择一项");
                return;
            }
            var num =data[0].grmid;
            $.get(
                "http://localhost:9000/arrival/arriveNotify/"+num,
                function(data){
                    alert(data.msg);
                    if(data.code=="0"){
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                        setTimeout(function() {
                            location.reload();
                            // parent.location.reload();
                        }, 2000);
                        //location.reload();
                    }else{
                        layer.msg(data.msg,{
                            icon: 1,
                            time: 3000
                        })
                    }
                }

            )
        })


        // 点击查询按钮
        /* $('#btnSearch').click(function () {
             MgrSettle.search();
         });*/
        // 重置查询条件
        $("#btnReset").click(function () {
            $("#idcard").val("");
            $("#linkmanPhone").val("");
            $("#goodsRevertBillCode").val("");
            $("#arriveBegin").val("");
            $("#arriveEnd").val("");
            form.render(null, 'testForm');
        });

        //!!! 注意：批量删除按钮在script里，必须使用以下格式才能不出点击重置后无效的bug
        //批量删除
        $('body').on('click', '#btnBatchDelete', function() {
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data,
                keys ="";
            if(data.length > 0) {
                for (var i in data) {
                    keys+=data[i].grmid+",";
                }
                keys = keys.substring(0,keys.length-1);
                console.log(keys);
                layer.confirm('确定删除选中的数据？',{title: '提示信息'},function(index) {
                    $.post('http://localhost:9000/arrival/deleteBatch/'+keys,function(data){
                        tableIns.reload();
                        layer.msg(data.msg);
                        layer.close(index);
                    });
                });
            }else{
                layer.msg("请先选择需要删除的数据");
            }
        });
        /*        $("#btnBatchDelete").click(function () {

                });*/

        // 服务器排序
        table.on('sort(testTable)', function (obj) { //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            // console.log(obj.field); //当前排序的字段名
            // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            // console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('testTable', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    sidx: obj.field //排序字段
                    , sord: obj.type //排序方式
                }
            });
            layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });

        // 监听行单击事件
        /*table.on('row(test)', function(obj){
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });*/

        // 监听行双击事件
        table.on('rowDouble(testTable)', function (obj) {
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
        });


        // 复选框监听
        table.on('checkbox(testTable)', function (obj) {
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        //头工具栏事件
        table.on('toolbar(testTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听工具条
        table.on('tool(testTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                // 这行是监听到的表格行数据信息，复制给json全局变量。
                // jsonString = JSON.stringify(data);
                // 打开弹窗
                layer.open({
                    // title支持三种类型的值，若你传入的是普通的字符串，如title :'我是标题'，那么只会改变标题文本；
                    // 若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;']，
                    // 数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
                    // 类型：String/Array/Boolean，默认：'信息'
                    title:'修改操作'

                    // moveOut: true,
                    ,area: ['60%','80%']
                    //类型：String/DOM/Array，默认：''

                    // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    // 详见官方文档中的弹出层
                    ,type: 2

                    // content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，
                    // 更可以随着type的不同而不同，当type为1时，可以指定隐藏的元素，或直接写html代码
                    ,content:'modifyProject.html'

                    // 是否能够最大化最小化
                    ,maxmin: true

                    // 0-6的动画形式，-1不开启
                    //,anim: 2

                    //皮肤风格
                    ,skin: 'layui-layer-molv'

                    // 当你需要在层创建完毕时即执行一些语句，可以通过该回调。
                    // success会携带两个参数，分别是当前层DOM当前层索引。
                    // index是指当前选择的是表格中的第几行
                    // ayero = layer object = layer 的对象 = 弹出层的对象
                    ,success: function(layero, index) {
                        var body = layer.getChildFrame('body', index); //得到产品的BODY
                       // body.find('#hidValue').val(JSON.stringify(data)); //将本层的窗口索引传给的hidValue中
					   body.find('#grmid').val(data.grmid);
                      body.find('#goodsRevertBillCode').val(data.goodsRevertBillCode);
                        body.find('#allCarriage').val(data.allCarriage);
						 body.find('#insurance').val(data.insurance);
						 body.find('#linkmanPhone').val(data.linkmanPhone); 
						 body.find('#ifBalance').val(data.ifBalance);
						 body.find('#checkGoodsReceive').val(data.checkGoodsReceive.status);
						body.find('#driverInformation').val(data.driverInformation.driverName);
                    }

                });
            }
        });
    });
</script>
</body>
</html>
